<template>
    <div id="carousel">
        <el-carousel :interval="3000" type="card" height="300px" v-show="isShow">
            <el-carousel-item v-for="item in imageList.slice(0, 6)" :key="item.id">
                <div>
                    <el-image
                        class="e-image"
                        :src="item.imgData"
                        :preview-src-list="previewSrcList"
                        fit="fill">
                    </el-image>
                </div>
            </el-carousel-item>
        </el-carousel>
        <el-empty description="没有图片哦" v-show="!isShow"></el-empty>
    </div>
</template>

<script>
export default {
    name: "Carousel",
    data() {
        return {
            imageList: [],
            previewSrcList: [],
            isShow: true
        }
    },
    computed: {
    },
    methods: {
        getPicURL(baseURL) {
            return "/api/" + baseURL;
        }
    },
    mounted() {
        //    https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=6
        this.$api.carousel()
            .then(response => {
                // console.log(response);
                this.imageList = response.data;
                if(this.imageList.length === 0) {
                    this.isShow = false;
                    return;
                }
                for (var index in this.imageList) {
                    // console.log(this.imageList[index])
                    // this.previewSrcList.push("/api/" + this.imageList[index].url)
                }
            })
            .catch(error => {
                // console.log("报错了 ", error)
                this.isShow = false;
            })

    },
}
</script>

<style scoped>

#carousel {
    width: 100%;
    margin: auto;
}

.e-image {
    width: 100%;
    height: 100%
}



</style>
